<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML_task01_login</title>
  </head>

  <body>
    <link rel="stylesheet" href="style/CSS_task01_login.css" />
    <script src="JS/JS_task01_login.js"></script>
    <div id="login-box">
      <p>欢迎注册会员</p>
      <form id="login-form" method="post" action="">
        <div>
          <label class="form-label">手机号码：</label>
          <input
            type="text"
            class="form-input"
            name="username"
            title="手机号码"
            maxlength="11"
            placeholder="11位手机号"
            required
          /><span>必填</span>
        </div>
        <div>
          <label class="form-label">创建密码：</label>
          <input
            type="password"
            class="form-input"
            name="pwd"
            title="密码"
            maxlength="8"
            placeholder="长度8个字符"
            required
          /><span>必填</span>
        </div>
        <div>
          <label class="form-label">注册邮箱：</label>
          <input
            type="email"
            class="form-input"
            name="email"
            title="邮箱"
            placeholder="zhangsan@email.com"
            required
          /><span>必填</span>
        </div>
        <div>
          <label class="form-label">验证码：</label>
          <input
            type="text"
            class="form-input"
            name="captcha"
            maxlength="4"
            placeholder="输入验证码"
          />
          <canvas
            id="captchaCanvas"
            width="70"
            height="20"
            title="点击刷新"
          ></canvas>
        </div>
        <div>
          <label class="form-label">性别：</label>
          <input
            type="radio"
            name="sex"
            value="male"
            id="male"
            class="sex-radio"
            checked
          />
          <label for="male">男</label>
          <input
            type="radio"
            name="sex"
            value="female"
            id="female"
            class="sex-radio"
          />
          <label for="female">女</label>
        </div>
        <div>
          <label class="form-label">生日：</label>
          <input class="form-input" type="date" />
        </div>
        <div>
          <label class="form-label">年龄：</label>
          <input
            type="age"
            class="form-input"
            name="age"
            placeholder="请输入年龄"
          />
        </div>
        <div>
          <label class="form-label">籍贯：</label>
          <select name="省" size="1" class="form-input">
            <option value="值1">湖北省</option>
            <option value="值n">湖南省</option>
          </select>
          <select name="市" size="1" class="form-input">
            <option value="值1">武汉市</option>
            <option value="值n">长沙市</option>
          </select>
        </div>
        <div>
          <label class="form-label">个人学历：</label>
          <select name="education" size="1" class="form-input">
            <option value="值1">本科</option>
            <option value="值n">硕士</option>
            <option value="值n">博士</option>
          </select>
        </div>
        <div>
          <label class="form-label">月薪：</label>
          <input
            type="range"
            id="paid"
            name="paid"
            min="0"
            max="10000"
            step="100"
            value="0"
          />
          <span id="msg"></span>
          <script src="JS/JS_task01_login.js"></script>
        </div>
        <div>
          <label class="form-label">个人爱好：</label>
          <label class="like-option">
            <input type="checkbox" name="like" value="football" checked /> 唱歌
          </label>
          <label class="like-option">
            <input type="checkbox" name="like" value="basketball" /> 跑步
          </label>
          <label class="like-option">
            <input type="checkbox" name="like" value="music" /> 游泳
          </label>
        </div>
        <div>
          <label class="form-label">个人照片：</label>
          <div id="uploadForm">
            <!-- 文件选择框：只允许图片 -->
            <input
              class="form-input"
              type="file"
              id="avatar"
              name="avatar"
              accept="image/*"
              required
            />
          </div>
        </div>
        <!-- 图片预览区域 -->
        <div id="preview">
          <label class="form-label">图片预览：</label>
          <div class="preview-box">
            <img id="previewImage" src="" alt="预览" />
            <p id="noImage">暂无图片</p>
            <script src="JS/JS_task01_picture.js"></script>
          </div>
          <!-- 上传状态显示 -->
          <!-- <div id="status"></div> -->
          
        </div>
        <div>
          <label class="form-label">简历：</label>
          <textarea
            class="form-input"
            name="intro"
            cols="50"
            rows="10"
            placeholder="请填写个人简历"
          ></textarea>
        </div>
        <div class="submit-btn">
          <input type="submit" value="提交" />
          <input type="reset" value="重填" />
        </div>
        </form>
    </div>
  </body>
</html>
